import Modal from 'antd/lib/modal/Modal';
import { Form, Input, Button, Checkbox, message } from 'antd';
import React, { memo, useEffect, useRef, useState } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getLoginSucceedInfoAction, changePhoneVisible, changeshowModalActiom } from '../store/actionCreators';
import { PhoneLoginWrapper } from './style';
import Draggable from 'react-draggable';

const Phone = memo((props) => {
  // state and props
const [disabled,setDisabled] = useState(false)
const [ bounds, setBounds] = useState({ bounds: { left: 0, top: 0, bottom: 0, right: 0 },})
  //Hooks
  const dispatch = useDispatch()
  const draggleRef = useRef()
  const { phoneVisible, liginSucceedInfo} = useSelector((state) => {
    return {
      phoneVisible: state.getIn(["login", "phoneVisible"]),
      liginSucceedInfo:state.getIn(["login","liginSucceedInfo"])
    }
  },shallowEqual)
  useEffect(()=>{
    if(liginSucceedInfo){
      if(liginSucceedInfo.code === 502||liginSucceedInfo.code === 503){
        message.error('密码或者手机号错误');
      }else{
        //把Cookie信息存储到本地
        localStorage.setItem('cookie',liginSucceedInfo.cookie)
        dispatch(changePhoneVisible(false))
      }
    }
  },[dispatch,liginSucceedInfo])
  // function
  const handleCancel = () => {
    dispatch(changePhoneVisible(false))
  }
  const back =()=>{
    dispatch(changePhoneVisible(false))
    dispatch(changeshowModalActiom(true))
  }
  //表单function
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  }
  const onFinish = (values) => {
    dispatch(getLoginSucceedInfoAction(values.username, values.password))
  };
  //可移动窗体
  const onStart = (event, uiData) => {
    const { clientWidth, clientHeight } = window?.document?.documentElement;
    const targetRect = draggleRef?.current?.getBoundingClientRect();
    setBounds({
      bounds: {
        left: -targetRect?.left + uiData?.x,
        right: clientWidth - (targetRect?.right - uiData?.x),
        top: -targetRect?.top + uiData?.y,
        bottom: clientHeight - (targetRect?.bottom - uiData?.y),
      },
    });
  };
  return (
    <div>
      {/* onOk={handleOk} onCancel={handleCancel} */}
      <Modal title={
              <div
                style={{
                  width: '100%',
                  cursor: 'move',
                }}
                onFocus={() => { }}
                onBlur={() => { }}
              // end
              >
                手机号登录
            </div>
            } onCancel={handleCancel} visible={phoneVisible} footer=""
       modalRender={modal => (
        <Draggable
          disabled={disabled}
          bounds={bounds}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}
      >
        <PhoneLoginWrapper>
          <Form
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '手机号不能为空' }, {
                pattern: /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/,
                message: '请输入正确的手机号'
              }]}
            >
              <Input placeholder="请输入手机号" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input.Password placeholder="请输入密码" />
            </Form.Item>

            <Form.Item name="remember" valuePropName="checked" >
              <Checkbox>自动登录</Checkbox>
              <a href="/">忘记密码</a>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                登录
        </Button>
            </Form.Item>
          </Form>
          <div className="footer">
              <p className="back" onClick={back}>＜其他登录方式</p>
              <p className="register">没有账号?免费注册＞</p>
          </div>
        </PhoneLoginWrapper>
      </Modal>
    </div>
  )
})
export default Phone;